<template>
    <div class="pop-advance-win">
        <ayjDialog
            :title="md == 15 ? '预收款' : '预付款'"
            ref="dialogRef"
            width="30%"
            :slotFooter="true"
        >
            <div class="name-box bg_gray flex_row">
                <div class="avatar-box">
                    <img class="imgWHAvatar" :src="customMoerInfo.avatar" mode="aspectFill" alt="">
                </div>
               <div class="ml10">
                <div class="supp-name">
                    <span class="font_size18">{{ customMoerInfo.name }}</span>
                </div>
                <div class="corporate-name">
                    <span>公司：{{ customMoerInfo.company }}</span>
                </div>
               </div>
            </div>
            <div class="form-box">
                <el-form
                    ref="advanceform"
                    :model="advanceform"
                    :rules="rules"
                    label-width="70px"
                    :hide-required-asterisk="true"
                >
                    <el-form-item
                        label="扣款"
                    >
                        <div class="switch-div">
                            <i></i>
                            <el-switch
                                @change="switchChange"
                                v-model="switchVal"
                                :active-value="true"
                                :inactive-value="false"
                                >
                            </el-switch>
                        </div>
                    </el-form-item>
                    <el-form-item
                        :label="md == 15 ? '预收金额' : '预付金额'"
                        prop="money"
                    >
                        <el-input
                            style="width: 92%;"
                            v-model="advanceform.money"
                            :placeholder="
                                md == 15 ? '请输入收款金额' : '请输入付款金额'
                            "
                            @input="handlePriceInput"
                        ></el-input>
                        <span class="font_size12">（元）</span>
                    </el-form-item>
                    <el-form-item label="付款方式" prop="payid" v-if="switchVal?false:true">
                        <el-select
                            v-model="advanceform.payid"
                            placeholder="请选择付款方式"
                        >
                            <el-option
                                v-for="item in pay_list"
                                :key="item.id"
                                :label="item.title"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input
                            type="textarea"
                            v-model="advanceform.txt"
                            maxlength="2000"
                            show-word-limit
                        ></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer flex_center">
                <el-button @click="closeHandle" size="small">取 消</el-button>
                <el-button type="primary" size="small" @click="advanceSubmit" :loading="loading">确 定</el-button>
            </span>
        </ayjDialog>
    </div>
</template>

<script>
import config from "../../js/conf/Config.js";
import { priceInput } from '@/utils/common.js'

export default {
    name: "popadvanceWin",
    props: ["md"],
    data() {
        return {
            pay_list: [], //付款方式列表
            dialogVisible: false,
            advanceform: {  
                money: "",
                payid: "",
                txt: "",
            },
            customMoerInfo: {},
            paramData: {},
            apiUrl: "",
            rules: {
                money: [
                    {
                        required: true,
                        message: "请输入金额",
                        trigger: "blur",
                    },
                    {
                        pattern: /^\d+(.\d{1,2})?$/,
                        message: "请输入正确的金额",
                        trigger: "blur",
                    },
                ],
                payid: [
                    {
                        required: true,
                        message: "请选择付款方式",
                        trigger: "change",
                    },
                ],
            },

            switchVal: false, // 是否扣款
            loading: false,
        };
    },

    methods: {

        handlePriceInput(value) {
            this.advanceform.money = priceInput(value)
        },
            
        closeHandle() {
            this.$refs.dialogRef.close();
        },
        initData(data) {
            this.customMoerInfo = data.obj;
            this.apiUrl = data.api;
            this.paramData = data.param;
            this.advanceCharge();
        },
        // 监听扣款开关是否打开
        switchChange (val) {
            if (val) {
                this.advanceform.payid = "";
            }
        },

        // 提交预付款
        advanceSubmit() {
            this.$refs.advanceform.validate(async (valid) => {
                if (valid) {
                    this.loading = true;
                    let url = this.apiUrl;
                    let param = JSON.parse(JSON.stringify(this.advanceform));
                    param = Object.assign(param, this.paramData);
                    param.money = this.switchVal == true?param.money*-1:param.money;

                    let res = await this.$api({ url: url, data: param }).finally(() => {
                        this.loading = false;
                    })  ;
                    if (res.status == 1) {
                        this.$refs.dialogRef.close();
                        this.$emit("loadsuppinfoFun");
                    }
                }
            });
        },

        // 打开预付款弹框
        async advanceCharge() {
            this.colseDataFun();
            // this.dialogVisible = true;
            this.$refs.dialogRef.open();
            if (this.pay_list.length == 0) {
                let url = config.COMPSET_PAY_LS;
                let param = {
                    ch: 3,
                };
                let res = await this.$api({ url: url, data: param });
                if (res.status == 1) {
                    this.pay_list = res.data || [];
                }
            }
        },
        colseDataFun() {
            this.advanceform = {
                money: "",
                payid: "",
                txt: "",
            };
        },
    },
};
</script>

<style lang="scss" scoped>
.pop-advance-win {
    .name-box {
        margin-bottom: 10px;
        padding: 10px;
        border-radius: 4px;
    }
    ::v-deep.form-box {
        margin-top: 30px;
        .w-input {
            width: 217px;
        }
        .el-select {
            width: 100%;
        }
    }
    .switch-div {
        height: 40px;
        align-items: center;
        display: flex;
        justify-content: space-between;
    }
}
</style>